import Cleave from 'cleave.js';
import "cleave.js/dist/addons/cleave-phone.cn";

const myDirective = {
    install(Vue) {
        Vue.directive('drag', (el) => {
            const oDiv = el // 当前元素
            const minTop = oDiv.getAttribute('drag-min-top')
            const ifMoveSizeArea = 20
            oDiv.onmousedown = e => {
                let target = oDiv
                while (window.getComputedStyle(target).position !== 'absolute' && target !== document.body) {
                    target = target.parentElement
                }

                document.onselectstart = () => {
                    return false
                }
                if (!target.getAttribute('init_x')) {
                    target.setAttribute('init_x', target.offsetLeft)
                    target.setAttribute('init_y', target.offsetTop)
                }

                const initX = parseInt(target.getAttribute('init_x'))
                const initY = parseInt(target.getAttribute('init_y'))

                // 鼠标按下，计算当前元素距离可视区的距离
                const disX = e.clientX - target.offsetLeft
                const disY = e.clientY - target.offsetTop
                document.onmousemove = e => {
                    // 通过事件委托，计算移动的距离
                    // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
                    const l = e.clientX - disX
                    const t = e.clientY - disY
                    // 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
                    target.style.left = l + 'px'
                    target.style.top = (t < minTop ? minTop : t) + 'px'
                    if (Math.abs(l - initX) > ifMoveSizeArea || Math.abs(t - initY) > ifMoveSizeArea) {
                        target.setAttribute('dragged', '')
                    } else {
                        target.removeAttribute('dragged')
                    }
                }
                document.onmouseup = e => {
                    document.onmousemove = null
                    document.onmouseup = null
                    document.onselectstart = null
                }
                // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
                return false
            }
        })

        Vue.directive('cleave', {
            inserted: (el, binding) => {
                let inputel = el;
                if (el.tagName.toLowerCase() != "input") {
                    inputel = el.querySelector("input");
                }
                inputel.cleave = new Cleave(inputel, binding.value || {})
            }, update: (el) => {
                const event = new Event('input', {bubbles: true});
                setTimeout(function () {

                    let inputel = el;
                    if (el.tagName.toLowerCase() != "input") {
                        inputel = el.querySelector("input");
                    }

                    inputel.value = inputel.cleave.properties.result
                    inputel.dispatchEvent(event)
                }, 100);
            }
        })

        Vue.directive('demo', {
            bind: function (el, binding, vnode) {
                const s = JSON.stringify
                el.innerHTML =
                    '<span style="color:deepskyblue">name: </span> ' + s(binding.name) + '<span style="color:red;margin-left: 30px">指令名，不包括 v- 前缀</span>' + '<br>' +
                    '<span style="color:deepskyblue">value: </span>' + s(binding.value) + '<span style="color:red;margin-left: 30px">指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。</span>' + '<br>' +
                    '<span style="color:deepskyblue">expression: </span>' + s(binding.expression) + '<span style="color:red;margin-left: 30px">字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。</span>' + '<br>' +
                    '<span style="color:deepskyblue">argument: </span>' + s(binding.arg) + '<span style="color:red;margin-left: 30px">传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。</span>' + '<br>' +
                    '<span style="color:deepskyblue">modifiers: </span>' + s(binding.modifiers) + '<span style="color:red;margin-left: 30px">一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。</span>' + '<br>' +
                    '<span style="color:deepskyblue">vnode keys: </span>' + Object.keys(vnode).join(', ') + '<span style="color:red;margin-left: 30px">Vue 编译生成的虚拟节点,其中所包含的所有的key</span>'
            }
        })
    }
}
export default myDirective
